<template>
  <div class="main-container">
    <div class="top">
      <img
        @click="changePhoto"
        :src="userPhoto ? 'http://localhost:20000' + userPhoto : photo"
      />

      <span>{{userInfo.name}}</span>
      <span class="phone">{{userInfo.phone}}</span>
    </div>
    <ul>
      <li>
        设置
        <i>></i>
      </li>
      <li>
        帮助与反馈
        <i>></i>
      </li>
      <li>
        云社区
        <i>></i>
      </li>
      <li>
        关于云社区
        <i>></i>
      </li>
    </ul>
    <div class="myDiv">
      <button @click="live">退出登录</button>
    </div>
  </div>
</template>
<script>
import photo from '@/images/photo.png'
import { base64UploadApi } from '@/Apis/homeApi'

export default {
  name: 'index',
  data () {
    return {
      userPhoto: '',
      photo,
      name: '',
      phone: ''
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters['common/userInfo']
    }
  },

  methods: {
    changePhoto () {
      const input = document.createElement('input')

      input.setAttribute('type', 'file')
      input.setAttribute('accept', 'image/*')
      input.onchange = () => {
        const file = input.files[0]
        if (!file.type.startsWith('image/')) {
          this.$toast.fail('请选择正确的图片')
          return
        }
        const fr = new FileReader()
        fr.onload = () => {
          const img = new Image()
          img.onload = () => {
            const canvas = document.createElement('canvas')
            canvas.width = 320
            canvas.height = 320
            const ctx = canvas.getContext('2d')

            ctx.drawImage(
              img,
              0,
              0,
              img.width,
              img.height,
              0,
              0,
              canvas.width,
              canvas.height
            )

            const res = canvas.toDataURL()
            base64UploadApi({
              type: 'photo',
              data: res,
              name: file.name
            }).then((d) => {
              console.log(d)
              this.userPhoto = d.data
            })
          }
          img.src = fr.result
        }
        fr.readAsDataURL(file)
      }
      input.click()
    },
    live () {
      this.$router.push('/login')
      this.userInfo = ''
    }
  }
}
</script>
<style lang="less" scoped>
@import "@/style/common.less";
.main-container {
  // .common;
  .top {
    height: 150px;
    background: rgba(255, 255, 255, 0.7);
    margin: 20px 0 20px;
    overflow: hidden;
    line-height: 150px;
    position: relative;
    top: 0;
    left: 0;
    img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 25px 20px;
      display: inline-block;
      overflow: hidden;
    }
    span {
      font-size: 1rem;

      position: absolute;
      top: -10px;
      left: 130px;
      &.phone {
        top: 20px;
        left: 130px;
        font-size: 0.8rem;
        color: @c11;
      }
    }
  }

  ul {
    background: rgba(255, 255, 255, 0.5);
    list-style: none;
    li {
      height: 50px;
      font-size: 0.8rem;

      margin-bottom: 10px;
      border-bottom: 1px solid @c5;
      line-height: 50px;
      padding-left: 10px;
      &:last-child {
        border: none;
      }
      i {
        float: right;
        margin-right: 30px;
        color: @c11;
        font-size: 0.7rem;
      }
    }
  }
  .myDiv {
    width: 300px;
    height: 40px;
    color: #fff;
    line-height: 40px;
    font-size: 0.9rem;
    margin: 15px auto;

    button {
      border: none;
      outline: none;
      background-color: @c4;
      width: 100%;
      height: 100%;
      border-radius: 20px;
    }
  }
}
</style>
